import React, { ReactElement, useRef, useState, useEffect } from 'react';
import { Button, message, Tree } from 'antd';
import { getMenu } from '@/api/menu';
import { getMenuByRoleId } from '@/api/role';
import {
  SettingOutlined,
  TrophyOutlined,
  BookOutlined,
  CrownOutlined,
  ClockCircleOutlined,
} from '@ant-design/icons';
import ProForm, {
  DrawerForm,
  ProFormText,
  ProFormDateRangePicker,
  ProFormSelect,
  ProFormTextArea,
} from '@ant-design/pro-form';
import { PlusOutlined } from '@ant-design/icons';
import { updateRole } from '@/api/role';

interface Props {
  reload: () => void;
  record: any;
  visibleRole: boolean;
  closeRole: () => void;
}
export default function Role({
  reload,
  record,
  closeRole,
  visibleRole,
}: Props): ReactElement {
  const [checkedKeys, setCheckedKeys] = useState<React.Key[]>(['']);
  const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
  const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true);
  const formRef = useRef();

  useEffect(() => {
    console.log(record, 'fffff');
    // form.setFieldsValue(record)
  }, [record.roleId]);

  const [treeData, setTreeData] = useState<any[]>([]);
  const getMenus = async () => {
    const res = await getMenu();
    console.log(formRef, 'resform');

    if (res.status == 200) {
      console.log(res.data.rows.children, 'menu');
      setTreeData([...res.data.rows.children]);
    }
  };
  const getMenuByRoleIdAsync = async () => {
    const res = await getMenuByRoleId(record.roleId);
    console.log(res, 'resmenus');
    if (res.status == 200) {
      setCheckedKeys(res.data);
    }
  };

  return record.roleId ? (
    <DrawerForm<{
      roleName: string;
      company: string;
    }>
      submitter={false}
      width={500}
      title="角色信息"
      formRef={formRef}
      // trigger={<SettingOutlined key="editable" style={{ color: '#4A9FF5' }} />}
      visible={visibleRole}
      onVisibleChange={async (visible) => {
        if (visible) {
          await getMenus();
          getMenuByRoleIdAsync();
        } else {
          closeRole();
        }
      }}
      autoFocusFirstInput
      drawerProps={{
        forceRender: true,
        destroyOnClose: true,
      }}
      initialValues={record}
    >
      <div style={{ marginBottom: '15px' }}>
        <CrownOutlined style={{ marginRight: '10px' }} />
        <span>角色名称：</span>
        <span>{record.roleName}</span>
      </div>
      <div style={{ marginBottom: '15px' }}>
        <BookOutlined style={{ marginRight: '10px' }} />
        <span>角色描述：</span>
        <span>{record.remark}</span>
      </div>
      <div style={{ marginBottom: '15px' }}>
        <ClockCircleOutlined style={{ marginRight: '10px' }} />
        <span>创建时间：</span>
        <span>{record.createTime}</span>
      </div>
      <div style={{ marginBottom: '15px' }}>
        <ClockCircleOutlined style={{ marginRight: '10px' }} />
        <span>修改时间：</span>
        <span>{record.modifyTime ? record.modifyTime : '--'}</span>
      </div>
      <div style={{ display: 'flex' }}>
        <TrophyOutlined style={{ marginRight: '10px' }} />
        <ProFormSelect label="权限选择">
          <Tree
            checkable
            // onExpand={onExpand}
            // expandedKeys={expandedKeys}
            autoExpandParent={autoExpandParent}
            checkedKeys={checkedKeys}
            selectedKeys={selectedKeys}
            treeData={treeData}
          />
        </ProFormSelect>
      </div>
    </DrawerForm>
  ) : (
    <></>
  );
}
